<template>
	<view class="container">
		<view class="pingjia">
			<view class="typelist">
				<view @click="changeType(index)" v-for="(item,index) in type" :key="index" :class="['typelist-item',item.selected?'active':'']">
					{{item.name}}({{item.num}})
				</view>
			</view>
			<scroll-view style="width: 100%;height: 900rpx;" scroll-y @scrolltolower="reachbottom">
				<view class="pingjialist">
					<view class="pingjialist-item" v-for="(item,index) in pingjia" :key="index">
						<view class="avatur">
							<image style="width: 100rpx;height: 100rpx;border-radius: 50%;" src="@/static/home/cat.png"></image>
						</view>
						<view class="right">
							<view class="name">
								<view style="font-weight: 300;">匿名用户</view>
								<view style="font-size: 26rpx;color: #b9b9b9;">{{item.create_time}}</view>
							</view>
							<view style="margin-bottom: 10rpx;"><uni-rate size="18" value="3" readonly="true"></uni-rate></view>
							<view style="margin-bottom: 10rpx;">
								{{item.content}}
							</view>
							<view class="tupian">
								<image @click="preview(item.image1,'image')" v-if="item.image1" :src="item.image1"></image>
								<image @click="preview(item.image2,'image')" v-if="item.image2" :src="item.image2"></image>
								<image @click="preview(item.image3,'image')" v-if="item.image3" :src="item.image3"></image>
								<video @click="preview(item.video1,'video')" v-if="item.video1" style="width: 200rpx;" :src="item.video1"></video>
								<video @click="preview(item.video2,'video')" v-if="item.video2" style="width: 200rpx;" :src="item.video2"></video>
								<video @click="preview(item.video3,'video')" v-if="item.video3" style="width: 200rpx;" :src="item.video3"></video>
							</view>
							<view v-if="item.children.length>0" class="huifu">
								<view>服务人员回复：{{item.children[0].content}}</view>
								<view v-if="item.showall" v-for="(citem,cindex) in item.children.slice(1)" :key="citem.pinglun_id">服务人员回复：{{citem.content}}</view>
								<view @click="showall(index)" style="display: flex;align-items: center;margin-top: 10rpx;" v-if="item.children.length>1&&!item.showall">
									展开全部{{item.children.length}}条评论
									<uni-icons  type="down"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive,defineProps,onBeforeMount} from "vue"
	import http from "@/utils/request.js"
	onBeforeMount(()=>{
		if(props.type==="service"){
			getservicepingjianum()
			getservicepingjia(true)
		}
		else{
			getpeoplepingjianum()
			getpeoplepingjia(true)
		} 
	})
	
	const props = defineProps();
	let Page_No=ref(1)
	let pingjia=ref([])
	let tab=ref(0)
	let isloading=ref(false)
	let Page_Size=ref(5)
	let type=ref([
		{
			name:'全部',
			num:0,
			selected:true,
		},
		{
			name:'带图评价',
			num:0,
			selected:false,
		},
		{
			name:'好评',
			num:0,
			selected:false,
		},
		{
			name:'中评',
			num:0,
			selected:false,
		},
		{
			name:'差评',
			num:0,
			selected:false,
		}
		
	])
	
	function reachbottom(){
		if(isloading.value)return
		if(Page_No.value*Page_Size.value>=type.value[tab.value].num){
			return uni.showToast({
				title:'数据加载完毕',
				icon:'none'
			})
		}
		Page_No.value++
		if(props.type==='service')getservicepingjia(false)
		else getpeoplepingjia(false)
	}
	function showall(index){
		console.log(pingjia.value[index])
		pingjia.value[index].showall=true
	}
	function preview(e,type){
		uni.previewMedia({
			sources:[{
				url:e,
				type:type
			}],
			success(res){
				console.log(res)
			},
			fail(err){
				console.log(err)
			}
		})
	}
	function changeType(index){
		type.value.forEach((item)=>{
			item.selected=false;
		})
		type.value[index].selected=true;
		tab.value=index;
		if(props.type==="service"){
			getservicepingjianum()
			getservicepingjia(true)
		}
		else{
			getpeoplepingjianum()
			getpeoplepingjia(true)
		}
	}
	function getservicepingjianum(){
		let response=http.get('/pingjia/getservicepingjianum',{service_id:props.service_id})
		response.then(res=>{
			if(res.data.code===200){
				type.value.forEach((item,index)=>{
					item.num=res.data.data[index]
				})
			}
		})
	}
	function getpeoplepingjianum(){
		let response=http.get('/pingjia/getpeoplepingjianum',{people_id:props.people_id})
		response.then(res=>{
			if(res.data.code===200){
				console.log(res.data.data)
				type.value.forEach((item,index)=>{
					item.num=res.data.data[index]
				})
			}
		})
	}
	function getservicepingjia(e){
		isloading.value=true
		if(e){
			pingjia.value=[]
			Page_No.value=1
		}
		let response=http.get('/pingjia/getservicepingjias',{
			Page_No:Page_No.value,
			Page_Size:Page_Size.value,
			service_id:props.service_id,
			type:tab.value
		})
		response.then(res=>{
			isloading.value=false
			if(res.data.code===200){
				pingjia.value=[...pingjia.value,...res.data.data]
			}
		})
	}
	function getpeoplepingjia(e){
		isloading.value=true
		if(e){
			pingjia.value=[]
			Page_No.value=1
		}
		let response=http.get('/pingjia/getpeoplepingjias',{
			Page_No:Page_No.value,
			Page_Size:Page_Size.value,
			people_id:props.people_id,
			type:tab.value
		})
		response.then(res=>{
			isloading.value=false
			if(res.data.code===200){
				pingjia.value=[...pingjia.value,...res.data.data]
			}
		})
	}
</script>

<style lang="scss">
.container{
	width: 100%;
	display:flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

.pingjia{
			width: 100%;
			
			.typelist{
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				border-bottom: 2rpx solid #e6e6e6;
				display: flex;
				flex-wrap: wrap;
				
				&-item{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					justify-content: center;
					padding: 15rpx 20rpx;
					border: 2rpx solid #cccccc;
					color:#939393;
					margin:15rpx;
					
					&.active{
						border-color: #e4b658;
						color: #feb94c;
						font-weight: 300;
					}
				}
			}
			
			.pingjialist{
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				
				&-item{
					width: 100%;
					padding: 20rpx 0 40rpx 0;
					display: flex;
					border-bottom: 2rpx solid #e6e6e6;
					
					.avatur{
						width: 20%;
						margin-right: 20rpx;
						display: flex;
						justify-content: center;
					}
					
					.right{
						flex-grow: 1;
						
						.name{
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 5rpx;
							font-size: 32rpx;
						}
						
						.tupian{
							display: flex;
							flex-wrap: wrap;
							
							image,video{
								width: 100rpx;
								height: 200rpx;
								margin-right: 10rpx;
							}
						}
						
						.huifu{
							background-color: #f3f3f3;
							color: #aeaeae;
							box-sizing: border-box;
							padding: 20rpx 15rpx;
						}
					}
				}
			}
		}
</style>
